<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>注册</title>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>

        <!-- jquery -->
        <script th:src="@{/js/jquery.min.js}" type="text/javascript"></script>
        <!-- bootstrap -->
        <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}" type="text/css"/>
        <script th:src="@{/bootstrap/js/bootstrap.min.js}" type="text/javascript"></script>
        <!-- jquery-validator -->
        <script th:src="@{/jquery-validation/jquery.validate.min.js}" type="text/javascript"></script>
        <script th:src="@{/jquery-validation/localization/messages_zh.min.js}" type="text/javascript"></script>
        <!-- layer -->
        <script th:src="@{/layer/layer.js}" type="text/javascript"></script>
        <!-- md5.js -->
        <script th:src="@{/js/md5.min.js}" type="text/javascript"></script>
        <!-- common.js -->
        <script th:src="@{/js/common.js}" type="text/javascript"></script>

    </head>
    <body>

        <form id="loginForm" method="post" name="loginForm" style="width:50%; margin:0 auto">

            <h2 style="text-align:center; margin-bottom: 20px">用户注册</h2>

            <div class="form-group">
                <div class="row">
                    <label class="form-label col-md-4">请输入手机号码</label>
                    <div class="col-md-5">
                        <input class="form-control" id="mobile" maxlength="11" minlength="11" name="mobile" placeholder="手机号码" required="true"
                               type="text"/>
                    </div>
                    <div class="col-md-1">
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="row">
                    <label class="form-label col-md-4">请输入昵称</label>
                    <div class="col-md-5">
                        <input class="form-control" id="nickname" maxlength="20" minlength="0" name="nickname" placeholder="昵称" required="true"
                               type="text"/>
                    </div>
                    <div class="col-md-1">
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="row">
                    <label class="form-label col-md-4">输入密码</label>
                    <div class="col-md-5">
                        <input class="form-control" id="password" maxlength="16" minlength="6" name="password" placeholder="密码"
                               required="true" type="password"/>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-5">
                    <button class="btn btn-primary btn-block" onclick="reset()" type="reset">重置</button>
                </div>
                <div class="col-md-5">
                    <button class="btn btn-primary btn-block" onclick="register()" type="submit">注册</button>
                </div>
            </div>

        </form>
    </body>
    <script>
        function register() {
            $("#loginForm").validate({
                submitHandler: function (form) {
                    doRegister();
                }
            });
        }

        function doRegister() {
            g_showLoading();

            var inputPass = $("#password").val();
            var nickname = $("#nickname").val();
            var salt = g_passsword_salt;
            var str = "" + salt.charAt(0) + salt.charAt(2) + inputPass + salt.charAt(5) + salt.charAt(4);
            var password = md5(str);

            $.ajax({
                url: "/register/do/register",
                type: "POST",
                data: {
                    mobile: $("#mobile").val(),
                    password: password,
                    nickname: nickname
                },
                success: function (data) {
                    layer.closeAll();
                    if (data.code == 200200) {
                        layer.msg("注册成功");
                        window.location.href = "/login/to/login";
                    } else {
                        layer.msg(data.msg);
                    }
                },
                error: function () {
                    layer.closeAll();
                }
            });
        }
    </script>
</html>
